<!DOCTYPE html>
<html>
<head>
    <title>SQL生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        #question-input {
            width: 100%;
            height: 40px;
            margin: 10px 0;
            padding: 10px;
            font-size: 16px;
        }
        #sql-output {
            width: 100%;
            height: 400px;
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #ccc;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            overflow-y: auto;
        }
        .btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>SQL生成器</h1>
    <div>
        <textarea id="question-input" placeholder="请输入问题（例如：查询油墩港的预警案件）" rows="3"></textarea>
    </div>
    <button class="btn" onclick="generateSQL()">生成SQL</button>
    <div id="status"></div>
    <h3>实时输出结果：</h3>
    <pre id="sql-output"></pre>

    <script>
        let eventSource = null; // 保存EventSource实例
        const output = document.getElementById('sql-output');
        const status = document.getElementById('status');

        // 生成SQL的函数
        async function generateSQL() {
            // 清空之前的输出和状态
            output.textContent = '';
            status.textContent = '';
            const question = document.getElementById('question-input').value.trim();
            if (!question) {
                alert('请输入问题！');
                return;
            }

            // 创建EventSource连接（注意：SSE默认使用GET，但我们需要POST，需用代理或自定义）
            // 这里通过Fetch API发送POST请求并保持流式响应（需后端支持流式POST）
            // 注意：原生EventSource仅支持GET，因此需要变通处理

            // 方案1：使用Fetch API模拟流式POST（需后端支持流式响应）
            const response = await fetch('http://10.1.163.73:3001/generate_sql', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'text/event-stream' // 告知后端期望SSE格式
                },
                body: JSON.stringify({ question: question })
            });

            // 读取流式响应（逐块解析）
            const reader = response.body.getReader();
            const decoder = new TextDecoder('utf-8');
            let result = '';
            status.textContent = '生成中...';

            while (true) {
                const { done, value } = await reader.read();
                if (done) break;
                const chunk = decoder.decode(value);
                // 解析每一块数据（假设每行是独立的事件）
                const lines = chunk.split('\n');
                for (const line of lines) {
                    if (line.startsWith('data: ')) {
                        const data = line.slice(6); // 去掉前缀'data: '
                        if (data === '[DONE]') {
                            status.textContent = '完成！';
                            break;
                        }
                        result += data;
                        output.textContent = result;
                    }
                }
            }
        }
    </script>
</body>
</html>